<!--
 * @Author: your name
 * @Date: 2021-04-22 13:52:52
 * @LastEditTime: 2021-04-22 15:23:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-todolist\src\components\Add.vue
-->
<template>
  <div class="form-group">
    <label for="">添加待办事项</label>
    <div class="row">
      <div class="col-8">
        <input
          type="text"
          class="form-control"
          v-model="inputValue"
          @keydown.enter="add()"
        />
      </div>
      <div class="col-4">
        <select class="form-control" v-model="filterState">
          <option :value="TodoItemState.ALL">选择以过滤...</option>
          <option :value="TodoItemState.OPEN">待办中</option>
          <option :value="TodoItemState.DONE">已完成</option>
          <option :value="TodoItemState.DELETE">已删除</option>
        </select>
      </div>
    </div>
    <small class="form-text text-muted">回车即可加入</small>
  </div>
  <ul class="list-group">
    <li
      class="list-group-item d-flex align-item-center justify-content-between"
      @click.stop="check(item)"
      v-for="item in todos"
      :key="item.id">
      <div class="form-check">
        <input
        type="checkbox"
        class="form-checkinput"
        :id="item.id"
        :disabled="item.state === TodoItemState.DELETE"
        :checked="item.state === TodoItemState.DONE">
        <label
        :class="{'text-black-50 line-through':item.state === TodoItemState.DONE}"
        :for="item.id"
        @click.stop.prevent="check(item)">{{ item }}</label>
      </div>
      <div class="float-right ctrls" :class="{'d-none':item.state !== TodoItemState.OPEN}">
        <button class="btn btn-warning btn-sm mr-2 text-light" @click.stop="edit(item)">编辑</button>
        <button class="btn btn-danger btn-sm">删除</button>
      </div>
    </li>
  </ul>
  <button class="btn btn-danger float-right mt-4" type="button" @click.stop="hide">
    {{filterState === TodoItemState.OPEN ? '显示所有' : '隐藏已完成'}}
  </button>
</template>

<script lang="ts">
import { TodoItem } from '@/common/interface'
import router from '@/router'
import store from '@/store'
import { defineComponent, ref, computed } from 'vue'
import { TodoItemState } from '../common/const'

export default defineComponent({
  name: 'Add',
  setup () {
    const inputValue = ref('')
    const fileterState = ref(TodoItemState.DONE)

    const add = () => {
      store.commit('add', inputValue.value)
      inputValue.value = ''
    }

    const check = (item: TodoItem) => {
      if (item.state === TodoItemState.OPEN || item.state === TodoItemState.DONE) {
        store.commit('check', item.id)
      }
    }

    const remove = (id: string) => {
      store.commit('remove', id)
    }

    const filterItem = (value: TodoItemState) => {
      console.log('value :>> ', value)
      if (value === TodoItemState.ALL) {
        return store.state.todos
      }
      return store.state.todos.filter(item => item.state === value)
    }

    const hide = () => {
      if (fileterState.value === TodoItemState.OPEN) {
        fileterState.value = TodoItemState.ALL
      } else {
        fileterState.value = TodoItemState.OPEN
      }
    }

    const edit = (item: TodoItem) => {
      store.commit('saveEditItem', item)
      router.push({ name: 'edit' })
    }

    return {
      inputValue,
      fileterState,
      add,
      todos: computed(() => filterItem(fileterState.value)),
      TodoItemState,
      check,
      remove,
      hide,
      edit
    }
  }
})
</script>
<style scoped lang="scss">
.line-through {
  text-decoration: line-through;
}

.list-group-item {
  user-select: none;
  &:hover {
    .ctrls {
      display: block;
    }
  }
  .ctrls {
    display: none;
  }
}
</style>
